<template>
	<!-- 自定义 tabBar -->
	<view
		class="custom-tabbar-container"
		:style="{ backgroundColor: config.backgroundColor }">
		<view
			class="tabbar-item"
			v-for="item in tabBarPages"
			:key="item.pagePath"
			@click="toPage(item.pagePath)">
			<view
				class="icon bi"
				:class="checkActive(item.pagePath) ? item.selectedIcon : item.icon"
				:style="{
					fontSize: config.iconSize + 'rpx',
					color: checkActive(item.pagePath) ? config.selectedIconColor : config.iconColor,
				}"></view>
			<view
				class="text"
				:style="{
					color: checkActive(item.pagePath) ? config.selectedTextColor : config.textColor,
				}">
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
import { computed, defineComponent, ref } from 'vue';

export default defineComponent({
	name: 'CustomTabbar',
	setup() {
		//  tabBar 配置
		const config = ref({
			textColor: '#B9BBBC', // 文字颜色
			selectedTextColor: '#6FD719', // 选中文字颜色
			iconSize: 38, // 图标大小
			iconColor: '#333333', // 图标颜色
			selectedIconColor: '#6FD719', // 选中图标颜色
			backgroundColor: '#FFFFFF', // 背景颜色
		});

		// tabBar 页面列表
		const tabBarPages = ref([
			{
				pagePath: '/pages/index/index',
				text: '首页',
				icon: 'bi-house', // https://icons.getbootstrap.com/ 图标库
				selectedIcon: 'bi-house-fill',
			},
			{
				pagePath: '/pages/order/order',
				text: '点餐',
				icon: 'bi-emoji-wink',
				selectedIcon: 'bi-emoji-wink-fill',
			},
			{
				pagePath: '/pages/order-list/order-list',
				text: '订单',
				icon: 'bi-cart',
				selectedIcon: 'bi-cart-fill',
			},
			{
				pagePath: '/pages/profile/profile',
				text: '我的',
				icon: 'bi-person',
				selectedIcon: 'bi-person-fill',
			},
		]);

		//  获取当前页面名称
		const pages = getCurrentPages();
		const currentPage = computed(() => {
			return pages[pages.length - 1].route;
		});

		// 检测当前页面是否为选中状态
		const checkActive = (pagePath) => {
			return `/${currentPage.value}` === pagePath;
		};

		// 跳转页面
		const toPage = (pagePath) => {
			uni.switchTab({ url: pagePath });
		};

		return { config, tabBarPages, toPage, checkActive };
	},
});
</script>

<style lang="scss" scoped>
// 自定义 tabBar
.custom-tabbar-container {
	bottom: 0;
	width: 100%;
	z-index: 30;
	display: flex;
	height: 100rpx;
	position: fixed;
	padding-bottom: 0;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
	// 底部安全距离
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);

	.tabbar-item {
		display: flex;
		font-size: 20rpx;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		.icon {
			font-weight: bold;
		}

		.text {
			margin-top: 6rpx;
		}
	}
}
</style>
